<template>
  <article class="order-container">
    <header class="order-header">
      <h1>订单详情</h1>
      <view style="padding: 10px; width: 200px">
        <up-button
          color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
          text="打印订单"
          v-print="printSetting"
        ></up-button>
      </view>
    </header>
    <section v-if="true" ref="orderBody" class="order-body" id="printMe">
      <div class="tables-container">
        <div class="table-section" v-if="goOrders.length > 0">
          <div style="justify-content: space-evenly; font-weight: bold">
            <span> {{ dateLabel }}: {{ formattedDate }} ({{ weekday }}) </span>
            <span>一共 {{ goOrders.length }} 批客人</span>
            <span>总人数: {{ totalPassengerCount }}</span>
            <p>上下车地点: {{ goOrders[0]?.pickup_location }}</p>
          </div>
          <table class="order-table">
            <thead>
              <tr>
                <th style="width: 195px">序号</th>
                <th style="width: 195px">行程类型</th>
                <th style="width: 195px">姓名</th>
                <th style="width: 195px">人数</th>
                <th style="width: 195px">手机号</th>
                <th style="width: 195px">实到人数</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in goOrders" :key="index">
                <td>{{ index + 1 }}</td>
                <td>{{ tripTypeText(item.reservation_type) }}</td>
                <td>{{ item.passenger_name }}</td>
                <td>{{ item.passenger_count }}</td>
                <td>{{ item.phone_number }}</td>
                <td>{{ item.actual_passenger_count || "" }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="table-section" v-if="returnOrders.length > 0">
          <div style="justify-content: space-evenly; font-weight: bold">
            <span> {{ dateLabel }}: {{ formattedDate }} ({{ weekday }}) </span>
            <span>一共 {{ returnOrders.length }} 批客人</span>
            <span>总人数: {{ returnTotalPassengerCount }}</span>
            <p>上下车地点: {{ returnOrders[0]?.pickup_location }}</p>
          </div>
          <table class="order-table">
            <thead>
              <tr>
                <th style="width: 195px">序号</th>
                <th style="width: 195px">行程类型</th>
                <th style="width: 195px">姓名</th>
                <th style="width: 195px">人数</th>
                <th style="width: 195px">手机号</th>
                <th style="width: 195px">实到人数</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in returnOrders" :key="index">
                <td>{{ index + 1 }}</td>
                <td>{{ tripTypeText(item.reservation_type) }}</td>
                <td>{{ item.passenger_name }}</td>
                <td>{{ item.passenger_count }}</td>
                <td>{{ item.phone_number }}</td>
                <td>{{ item.actual_passenger_count || "" }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>
  </article>
</template>

<script setup>
import { computed, ref, watch } from "vue";
import { format, getDay } from "date-fns";

const props = defineProps({
  orderData: {
    type: Array,
    required: true,
  },
});

const printSetting = ref({
  id: "printMe",
  style: {
    // 去掉默认的打印页眉和页脚
    "@page": {
      margin: "0", // 去掉边距
    },
  },
});

const order = computed(() => {
  return props.orderData.length > 0 ? props.orderData : null;
});

// 过滤出去程订单
const goOrders = computed(() => {
  let orders = order.value
    ? order.value.filter((item) => item.reservation_type == 0)
    : [];
  orders.sort(
    (a, b) =>
      Number(String(a.phone_number).replaceAll("*", "")) -
      Number(String(b.phone_number).replaceAll("*", ""))
  );
  return orders;
});

// 过滤出返程订单
const returnOrders = computed(() => {
  let orders = order.value
    ? order.value.filter((item) => item.reservation_type == 1)
    : [];
  orders.sort(
    (a, b) =>
      Number(String(a.phone_number).replaceAll("*", "")) -
      Number(String(b.phone_number).replaceAll("*", ""))
  );
  return orders;
});

const totalPassengerCount = computed(() => {
  if (!goOrders.value) return 0;
  return goOrders.value.reduce(
    (sum, item) => sum + (item.passenger_count || 0),
    0
  );
});

const returnTotalPassengerCount = computed(() => {
  if (!returnOrders.value) return 0;
  return returnOrders.value.reduce(
    (sum, item) => sum + (item.passenger_count || 0),
    0
  );
});

// 根据 trip_type 返回行程类型文本
const tripTypeText = (tripType) => {
  return tripType == 0 ? "去程" : "返程";
};

const dateLabel = computed(() => {
  return order.value[0]?.go_date ? "出发日期" : "返程日期";
});

const formattedDate = computed(() => {
  const date = order.value[0]?.go_date
    ? new Date(order.value[0].go_date)
    : new Date(order.value[0].return_date);
  return format(date, "yyyy-MM-dd");
});

const weekday = computed(() => {
  const date = order.value[0]?.go_date
    ? new Date(order.value[0].go_date)
    : new Date(order.value[0].return_date);
  const day = getDay(date);
  const weekdays = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ];
  return weekdays[day];
});
</script>

<style scoped>
.order-container {
  border: 1px solid #ddd;
  padding: 16px;
  margin-bottom: 16px;
  margin-top: 80px;
  border-radius: 4px;
}

.order-header,
.order-body,
.order-footer {
  margin-bottom: 10px;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tables-container {
  display: flex;
  flex-direction: column; /* 垂直堆叠表格 */
  gap: 20px; /* 表格之间的间距 */
}

.table-section {
  width: 100%; /* 确保表格占满容器的宽度 */
  break-inside: avoid; /* 避免表格内部断页 */
}

.order-table {
  width: 100%; /* 确保表格占满容器的宽度 */
  border-collapse: collapse;
}

.order-table th,
.order-table td {
  border: 1px solid #000;
  padding: 8px;
  text-align: left;
}

.order-table th {
  background-color: #f2f2f2;
}

/* 打印样式 */
@media print {
  .table-section {
    page-break-after: always; /* 每个表格后强制分页 */
  }
  .table-section:last-child {
    page-break-after: auto; /* 最后一个表格不强制分页 */
  }
  @page {
    margin: "0";
  }
  /* 强制去掉页眉和页脚 */
  header,
  footer {
    display: none;
  }
}
</style>
